<template>
  <div class="dashboard-editor-container">

    <panel-group />

    <el-row :gutter="32">
      <el-col :xs="36" :sm="36" :lg="12">
        <div class="chart-wrapper">
          <div id="riskChart" :style="{height:height,width:width}"/>
        </div>
      </el-col>
      <el-col :xs="36" :sm="36" :lg="12">
        <div class="chart-wrapper">
          <div id="equipmentChart" :style="{height:height,width:width}"/>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <raddar-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <pie-chart />
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="8">
        <div class="chart-wrapper">
          <div id="emergencyChart" style="height:300px;width:100%"/>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import echarts from 'echarts'
import { getRiskPie,getEquipmentPie,getEmergencyHistogram } from "@/api/biz/homePage";

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      width:'100%',
      height:'300px',
      //风险
      riskChart:null,
      riskOption:{},
      riskData:[],
      //设备
      equipmentChart:null,
      equipmentOption:{},
      equipmentData:[],
      //应急预案
      emergencyChart:null,
      emergencyOption:{},
      emergencyData:[],
      emergencyX:[],//x轴
      planData:[],//应急预案
      plainData:[],//应急演练
    }
  },
  created(){
    this.initChart();
  },
  methods: {
    initChart(){
      //风险
      getRiskPie().then(response=>{
        for(var i=0;i<response.data.length;i++){
          var d = {};
          if(response.data[i]['risk_level'].indexOf('重') != -1){
            d = {'value':response.data[i]['total'],'name':response.data[i]['risk_level'],itemStyle:{color:'#EE6666'}};
          } else if(response.data[i]['risk_level'].indexOf('一') != -1){
            d = {'value':response.data[i]['total'],'name':response.data[i]['risk_level'],itemStyle:{color:'#73C0DE'}};
          } else if(response.data[i]['risk_level'].indexOf('较') != -1){
            d = {'value':response.data[i]['total'],'name':response.data[i]['risk_level'],itemStyle:{color:'#FAC858'}};
          } else {
            d = {'value':response.data[i]['total'],'name':response.data[i]['risk_level'],itemStyle:{color:'#91CC75'}};
          }
          this.riskData.push(d);
        }
        this.$nextTick(()=>{
          this.initRiskChart();
          this.riskChart.setOption(this.riskOption);
        })
      });
      //设备
      getEquipmentPie().then(response=>{
        for(var i=0;i<response.data.length;i++){
          var d = {'value':response.data[i]['total'],'name':response.data[i]['label']};
          this.equipmentData.push(d);
        }
        this.$nextTick(()=>{
          this.initEquipmentChart();
          this.equipmentChart.setOption(this.equipmentOption);
        })
      });
      //应急预案
      getEmergencyHistogram().then(response=>{
        for(var i=0;i<response.data.length;i++){
          this.emergencyX.push(response.data[i]['label']);
          this.planData.push(response.data[i]['planTotal']);
          this.plainData.push(response.data[i]['plainTotal']);
        }
        console.log(response)
        this.$nextTick(()=>{
          this.initEmergencyChart();
          this.emergencyChart.setOption(this.emergencyOption);
        })
      })
    },
    initRiskChart(){
      this.riskChart = echarts.init(document.getElementById("riskChart"));
      this.riskOption = {
        title: {
          text: '风险点分布',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.riskData
          }
        ]
      };
    },
    initEquipmentChart(){
      this.equipmentChart = echarts.init(document.getElementById("equipmentChart"));
      this.equipmentOption = {
        title: {
          text: '设备设施',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.equipmentData
          }
        ]
      };
    },
    initEmergencyChart(){
      this.emergencyChart = echarts.init(document.getElementById("emergencyChart"));
      this.emergencyOption = {
        title: {
          text: '应急'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend:{
          data: ['应急预案', '应急演练']
        },
        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: this.emergencyX,
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series:[
          {
            name: '应急预案',
            type: 'bar',
            data: this.planData
          },
          {
            name: '应急演练',
            type: 'bar',
            data: this.plainData
          }
        ]
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
